<template>
  <!-- :style="{marginLeft:headerMarginLeft+'px'}" 注释掉就行-->
  <div id="header" class="clearfix flex flex-y-center">
    <div class="log fl">
      <div class="log-box">infosun太信</div>
    </div>
    <div class="header-l fl flex1 clearfix">
      <div class="header-l-iframe clearfix"></div>
    </div>
    <div class="header-r fr clearfix">
      <div class="header-r-item fl clearfix">
        <i></i>
        <el-dropdown>
          <span class="el-dropdown-link">
            <em class="head-portrait-url">
              <!-- <img :src="returnHeadPortraitUrl" alt=""> -->
            </em>
            {{returnUserName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
            <!-- <span @click="FnShowMask({type:'changeInformation'})">修改个人信息</span> -->
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="FnShowMask({type:'changePassword'})">修改密码</span>
            </el-dropdown-item>
          </el-dropdown-menu> 
        </el-dropdown>
      </div>
      <div class="header-r-item fl" @click="FnOut">
        <i></i>
        <span>退出</span>
      </div>
    </div>
    <Vmask
      :showMask="showMask"
      :maskWidth="maskWidth"
      :maskData="maskData"
      :maskTitle="maskTitle"
      @FnMask="FnMask"
    ></Vmask>
  </div>
</template>

<script>
import Vmask from "@/views/components/v-mask/v-mask";
import { OutLogin , Code , UpdatePassword} from '@/axios/api'
import { mapGetters  } from 'vuex';

export default {
  name: "",
  data() {
    return {
      headerMarginLeft: 0, //左边距
      maskWidth: "400px",
      showMask: false,
      maskTitle: "",
      maskData: {
        changeInformationBox: false,
        changeInformationName: "",
        phone: "",
        mailbox: ""
      },
      headPortraitUrl: ""
      // headPortraitUrl:JSON.parse(window.sessionStorage.getItem("token")).obj.user.headPortraitUrl
    };
  },
  props: [],
  created() {
    // var muneList = JSON.parse(window.sessionStorage.getItem("token")).obj.authorities[0];
    // var secondaryMenu = JSON.parse(window.sessionStorage.getItem("token")).obj.authorities[1];
    // var thirdMenu = JSON.parse(window.sessionStorage.getItem("token")).obj.authorities[2];
    // for(var i=0;i<secondaryMenu.length;i++) {
    //   secondaryMenu[i].name=='manager_user_edit'?this.secondaryMenu.manager_user_edit=true:'';//修改个人信息
    // }
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    // ...mapActions(['SETTOKEN']),
    FnMask(obj) {
      console.log(obj)
      if (obj.type == "false") {
        //取消
        this.showMask = false;
        this.maskTitle = "";
        this.maskData = {};
      } else if (obj.type == "changeInformation") {
        //修改个人信息-确定
        if (
          !obj.content.changeInformationName ||
          !obj.content.mailbox ||
          !obj.content.phone
        ) {
          this.$message.error("参数不能为空");
          return;
        } else if (!/^1[34578]\d{9}$/.test(obj.content.phone)) {
          this.$message.error("手机号码有误，请重填");
          return;
        } else if (
          !/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(
            obj.content.mailbox
          )
        ) {
          this.$message.error("邮箱有误，请重填");
          return;
        }
        ChangeInformation({
          nickName: obj.content.changeInformationName,
          mobile: obj.content.phone,
          email: obj.content.mailbox,
          userId: this.getInformation.userId,
          headPortraitUrl: obj.content.headerImg,
          _method: "patch"
        }).then(res => {
          if (res.code == Code) {
            var token = JSON.parse(window.sessionStorage.getItem("token"));
            token.obj.user.nickName = obj.content.changeInformationName;
            token.obj.user.mobile = obj.content.phone;
            token.obj.user.email = obj.content.mailbox;
            token.obj.user.headPortraitUrl = obj.content.headerImg;
            this.headPortraitUrl = token.obj.user.headPortraitUrl;
            window.sessionStorage.setItem("token", JSON.stringify(token));
            this.SETTOKEN(token);
            this.$message.success("修改成功");
            this.showMask = false;
            this.maskData = {};
          } else {
            this.$message.error(res.message);
          }
          // console.log(res)
        });
        // console.log(obj)
      } else if (obj.content.changePassWordBox) {//修
        if (
          !obj.content.newPassWord ||
          !obj.content.newPassWordAgain ||
          !obj.content.oldPassWord
        ) {
          this.$message.error("密码不能为空");
          return;
        } else if (obj.content.newPassWordAgain != obj.content.newPassWord) {
          this.$message.error("新密码与确认新密码不相同");
          return;
        }
        var user = JSON.parse(window.sessionStorage.getItem("user"));
        if (!user) {
          this.$message.error("请先登录");
          this.$router.push({ name: "login" });
          return;
        }
        UpdatePassword({
          oldPassword: this.$md5(obj.content.oldPassWord),
          newPassword: this.$md5(obj.content.newPassWordAgain) ,
          orderNo: user.data.orderNo,
          roleId:user.data.deptId
          // _method: "patch"
        }).then(res => {
          if (res.state == Code) {
            this.$message.success("修改成功，请重新登录");
            this.showMask = false;
            this.maskData = {};
            var that = this;
            setTimeout(() => {
              that.FnOut();
            }, 500);
          }
        });
      }
    },
    FnShowMask(obj) {
      if (obj.type == "changeInformation") {
        //修改个人信息
        if (!this.getToken) {
          this.$router.push({ name: "login" });
          return;
        }
        this.maskTitle = "个人信息";
        this.showMask = true;
        this.maskData = {
          changeInformationBox: true,
          headerImg: this.getToken.obj.user.headPortraitUrl,
          changeInformationName: this.getToken.obj.user.nickName, //姓名：
          phone: this.getToken.obj.user.mobile, //手机：
          mailbox: this.getToken.obj.user.email //邮箱：
        };
        // console.log(this.getToken)
      } else if (obj.type == "changePassword") {
        //修改密码
        this.showMask = true;
        this.maskTitle = "修改密码";
        this.maskData = {
          changePassWordBox: true,
          defaultBox: true,
          newPassWord:'',
          newPassWordAgain:'',
          oldPassWord:''
        };
      }
    },
    FnOut() {
      if(!this.getUser) {
        this.$message.error("登录信息错误请重新登录");
        this.$router.push({ name: "login" });
        return 
      }
      OutLogin({
        orderNo: this.getUser.orderNo
      }).then(res => {
        if (res.state == Code) {
          this.$message.success("退出成功");
          window.sessionStorage.removeItem("user");
          this.$router.push({ name: "login" });
        }
      });
    }
  },
  components: {
    Vmask
  },
  computed: {
    ...mapGetters(['getBtnList','getUser']),
    returnUserName: function() {
      var user = window.sessionStorage.getItem('user')?JSON.parse(window.sessionStorage.getItem('user')):'';
      var userName = ''
      if(user) {
        userName = user.data.username
      }else {
        return userName = ''
      }
      return userName;
    }
    // returnHeadPortraitUrl:function () {
    //   // var token = this.getToken;
    //   // // var token = window.sessionStorage.getItem("token")?JSON.parse(window.sessionStorage.getItem("token")):'';
    //   if(!this.getToken.obj) {
    //     return this.headPortraitUrl='';
    //   }else {
    //     return this.headPortraitUrl = this.getToken.obj.user.headPortraitUrl;
    //   }
    //   // return this.headPortraitUrl
    //   // if(token) {
    //   //   if(token.obj){
    //   //     if(token.obj.user) {
    //   //       return token.obj.user.userName
    //   //     }
    //   //   }
    //   //   return ''
    //   // }else {
    //   //   return ''
    //   // }
    // }
  },
  watch: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
#header {
  top: 0;
  height: 55px;
  background-color: #f8f8f8;
  width: 100%;
  // margin-left: 200px;
  // padding-left: 210px;
  border-bottom: 1px solid #ccc;
  .log {
    height: 55px;
    background-color: #333;
    width: 200px;
    padding: 12px 0 0 25px;
    .log-box {
      height: 30px;
      line-height: 30px;
      border-radius: 3px;
      background-color: rgb(91, 91, 91);
      width: 120px;
      color: #fff;
      text-align: center;
    }
  }
  .header-l {
    // line-height: 40px;
    height: 55px;
    .header-l-iframe {
      height: 55px;
    }
  }
  .header-r {
    .header-r-item {
      line-height: 55px;
      margin-right: 15px;
      cursor: pointer;
      &:hover {
        span {
          color: rgb(17, 142, 234);
        }
      }
      span {
        color: #333;
      }
      .el-dropdown-link {
        .head-portrait-url {
          position: relative;
          width: 30px;
          height: 30px;
          overflow: hidden;
          margin-bottom: 8px;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-bottom: 12px;
          }
        }
      }
    }
  }
}
</style>
